<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    <div>div</div>
    <p>p</p>
    <div>div</div>
    <span>span</span>
    <p>p</p>
    <div>div</div>
    <!-- <script>
         var divs=document.querySelectorAll('div');
         var ps=document.querySelectorAll('p');
         //document.querySelectorAll获取的是一个NodeList(节点数组),
         //不能使用数组方法，但是它里面有forEach方法
         [].forEach.call(document.querySelectorAll("p"), function(){　
    　　         console.log("1")
         });//用面向对象改变数组的this指向，调用数组方法
         divs.forEach(function(v){
         	v.style.border='1px solid red';
         });
         ps.forEach(function(v){
         	v.style.border='1px solid #000';
         });
       
         /*var divs=document.getElementsByTagName('div');
         var ps=document.getElementsByTagName('p');
         //get*by* 返回的是一个DOM的伪数组,伪数组 不能调用数组的方法
         //所谓的伪数组，首先它不是一个数组；但是可以像数组一样遍历(for 循环遍历)使用
         //只需要满足：
         //1 可以使用 [index]来获取元素
         //2 可以使用 .length 属性获得元素长度
         //因此必须保证 length 是一个 >=0 的数字
         //因此可以封装一个函数来实现伪数组的判断
         
         for(var i=0;i<divs.length;i++){
         	divs[i].style.border='1px solid red';
         }      
         for(var i=0;i<ps.length;i++){
         	ps[i].style.border='1px solid blue';
         }*/    
    </script> -->

    <script>
        //get*by*返回的是一个DOM的伪数组
        //所谓的伪数组，首先它不是一个数组，但是可以像数组一样遍历(for循环遍历)使用
        //只需要满足：
        //1 可以使用 [index] 来获取元素
        //2 可以使用 .length 属性获得元素长度
        //因此必须保证length 是一个 >= 0 的数字
        //因此可以封装一个函数来实现伪数组的判断
        
        
        var divs=document.getElementsByTagName('div');
        var ps=document.getElementsByTagName('p');

        for(var i=0;i<divs.length;i++){
        	divs[i].style.border='1px solid red';
        }

        for(var i=0;i<ps.length;i++){
        	ps[i].style.border='1px solid blue';
        }

        //优化
        //1 将for循环封装成方法
        //     function css(leems，styles){}
        //2 优化一下前面的函数
        //     function css(obj) {}
        //     obj:{elems:[],styles:{}}
        //3 应该将for 循环封装成each 或map的方法，这样就可以处理任意的遍历了
        
        //现在是要封装库或框架，这时一定要考虑通用性
        //4 使用document.querySelectorAll方法封装元素获取     
    </script>
    </body>
</html>